<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">

<div id="hotelRoomDiv">
    <h4>酒店房间</h4>
    <div v-for="(hotelRoom,index) in rooms">
        <h4>房型{{index+1}}</h4>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>房型数量</h5>
                <form class="form-inline">
                    <label>
                        <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="hotelRoom.roomNum"/>
                    </label>间
                </form>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>房型</h5>
                <div class="form-group">
                    <label for="hotelRoomName">房间类型名称</label>
                    <input type="text" class="form-control" name="hotelRoomName" placeholder="请填写房间类型名称"
                           v-model:value="hotelRoom.roomName">
                </div>
                <div class="form-group">
                    <label>房型图片</label>
                    <div v-if="hotelRoom.hotelImages.length>0">
                        <label>现有图片</label>
                        <div>
                            <div class="card" style="width: 30%; height: 430px; float: left;margin: 10px 5px;"
                                 v-for="roomImage in hotelRoom.hotelImages">
                                <img v-bind:src="roomImage.image" class="card-img-top"
                                     style="height: 350px;max-width: 100%">
                                <div class="card-body" v-if="hotelRoom.hotelImages.length>1">
                                    <a href="#" class="btn btn-primary" @click="deleteRoomImage(roomImage.id)"
                                       style="float: right">删除图片</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <input class="hotelRoomImage" name="file" type="file" multiple=true>
                </div>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>包含的床和数量</h5>
                <div v-for="(item,index) in hotelRoom.beds">
                    <div class="form-group">
                        <label for="hotelBedType">床型名称</label>
                        <input type="text" class="form-control" name="hotelBedType" placeholder="请填写床型名称"
                               v-model:value="item.bedName"/>
                    </div>
                    <form class="form-inline">
                        <label>
                            <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="item.bedNum"/>
                        </label>张
                    </form>
                </div>
                <button @click="addBedNum(hotelRoom.beds)">添加床型</button>
                <button @click="deleteBedNum(hotelRoom.beds)">删除床型</button>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>包含的早餐数量</h5>
                <form class="form-inline">
                    <label>
                        <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="hotelRoom.breakfastNum"/>
                    </label>份
                </form>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>描述</h5>
                <div class="form-group">
                    <label for="hotelRoomDetail">房间描述</label>
                    <textarea rows="3" type="text" class="form-control" name="hotelRoomDetail" placeholder="请填写房间描述"
                              v-model:value="hotelRoom.roomDetail">
                </textarea>
                </div>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>房间价格</h5>
                <form class="form-inline">
                    <label>
                        <input type="number" step="0.1" class="form-control mb-2 mr-sm-2"
                               v-model:value="hotelRoom.roomCost"/>
                    </label>元/晚
                </form>
            </div>
        </div>
        <div class="card" style="width: 90%;margin: 30px auto auto;">
            <div class="card-body">
                <h5>预定支付方式</h5>
                <div class="form-group">
                    <label for="hotelOrderType">预定支付方式</label>
                    <input type="text" class="form-control" name="hotelOrderType" placeholder="请填写预定支付方式名称"
                           v-model:value="hotelRoom.payType">
                </div>
            </div>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveHotelRoom()">保存</button>
            <button type="button" class="btn-primary" onclick="addHotelRoom()">添加房间</button>
        </div>
    </div>
</div>
<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>


<script>
    var hotelRoomVue = new Vue({
        el: "#hotelRoomDiv",
        data: {
            rooms: []
        },
        methods: {
            initRoomImage: function () {
                var self = this;
                $(".hotelRoomImage").each(function (index, item) {
                    $(item).fileinput({
                        language: "zh",
                        uploadUrl: "/api/upload/hotelFacility",
                        allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                        showUpload: true,
                        showRemove: false,
                        showPreview: true,
                        showCaption: true,
                        browseClass: "btn btn-primary",
                        removeClass: "btn btn-danger",
                        dropZoneEnabled: true,
                        maxFileCount: 5,
                        autoReplace: true,//是否可替换
                        layoutTemplates: {
                            actionUpload: ''
                        },
                        enctype: 'multipart/form-data',
                        msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                        validateInitialCount: true,
                    }).on('fileerror', function (event, data, msg) {
                        layer.alert("Upload file failed" + msg, {icon: 0});
                    }).on('fileuploaded', function (event, data) {
                        if (data.response.status === 200) {
                            self.rooms[index].hotelImages.push({"image": data.response.data})
                        } else {
                            $(".fileinput-remove-button").click();
                        }
                        layer.alert(data.response.message, {icon: 0});
                    }).on('fileclear', function (event) {
                    });
                })
            },
            initPage: function () {
                var self = this;
                $.ajax({
                    url: "/api/rooms/" + $("#userId").val(),
                    type: "get",
                    async: false,
                    success: function (rs) {
                        self.rooms = rs;
                        console.log(rs);
                        self.$nextTick(function () {
                            self.initRoomImage();
                        })
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            addBedNum: function (item) {
                var self = this;
                item.push({
                    bedName: "",
                    bedNum: ""
                })
            },
            deleteBedNum: function (item) {
                var self = this;
                if (item.length > 1) {
                    item.splice(-1);
                }
            },
            deleteRoomImage: function (id) {
                var self = this;
                $.ajax({
                    url: "/hotel/image/" + id,
                    type: "delete",
                    success: function (rs) {
                        self.initPage();
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            saveHotelRoom: function () {
                var self = this;
                $.ajax({
                    url: "/api/hotelRooms",
                    type: "put",
                    contentType: "application/json",
                    data: JSON.stringify(self.rooms),
                    success: function (rs) {
                        layer.alert("保存成功", {icon: 0});
                        self.initPage();
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            addHotelRoom: function () {
                var self = this;
                self.rooms.push({
                    user: {
                        userId: $("#userId").val()
                    },
                    roomNum: "",
                    roomName: "",
                    beds: [{
                        bedName: "",
                        bedNum: ""
                    }],
                    breakfastNum: "",
                    roomDetail: "",
                    roomCost: "",
                    payType: "",
                    hotelImages: [],
                });
                /*self.$nextTick(function () {
                    self.initRoomImage();
                })*/
            }
        },
        created: function () {
            window.addBedNum = this.addBedNum;
            window.deleteBedNum = this.deleteBedNum;
            window.saveHotelRoom = this.saveHotelRoom;
            window.addHotelRoom = this.addHotelRoom;
        },
        mounted: function () {
            this.initPage();
        }
    })
</script>